<template>
  <!-- 选择地址界面 -->
  <div class="container">
    <!-- 选择地址 -->
    <div class="flex_y_center">
      <div>
        <span style="color: red">*</span>
        收货地址：
      </div>
      <div style="margin-right: 10px">{{ addressName }}</div>
      <el-button type="text" @click="dialogAddress = true">选择地址</el-button>
    </div>

    <el-dialog title="选择地址" :visible.sync="dialogAddress" width="30%">
      <!-- 选择地址列表 -->
      <div>
        <div
          v-for="(item, index) of addressInfo"
          :key="index"
          style="margin-bottom: 10px"
          @click="chooseAddress(item)"
        >
          <el-radio v-model="addressId" :label="item.id">
            {{ item.province_name }}-{{ item.city_name }}-{{ item.region_name }}
            <span style="margin: 0 15px">{{ item.addressee }}</span>
            {{ item.mobile }}
          </el-radio>
        </div>
        <div class="flex_between">
          <div></div>
          <el-button type="text" @click="dialogAddAddress = true">
            新增地址
          </el-button>
        </div>
      </div>

      <!-- 新增地址 -->
      <el-dialog
        append-to-body
        title="新增地址"
        :visible.sync="dialogAddAddress"
      >
        <div>
          <div
            v-for="(item, index) of address"
            :key="index"
            class="flex_y_center"
            style="margin-bottom: 15px"
          >
            <div style="width: 30%; text-align: right">{{ item.name }}</div>
            <div style="width: 40%">
              <el-input
                v-model="addressForm[item.value]"
                :placeholder="item.place"
              />
            </div>
          </div>
          <div class="flex_y_center">
            <div style="width: 30%; text-align: right">地址:</div>
            <div style="width: 40%">
              <el-cascader
                v-model="baddress"
                :props="props"
                @change="cascaderChange"
              />
            </div>
          </div>
        </div>
        <div slot="footer">
          <el-button type="primary" @click="addressSubmit">确认</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import { getArea, groupAddressAdd } from '@/api/level'

  export default {
    props: {
      oGroupId: {
        type: Number,
        default: 0,
      },
      addressInfo: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        dialogAddress: false, // 控制选择地址对话框的显示隐藏
        dialogAddAddress: false, // 控制新增地址对话框显示隐藏

        addressId: '', // 用户选择的地址id
        addressName: '', // 选择的地址名称

        payForm: {
          ord_cons: '', // 联系人
          ord_tel: '', // 电话
          province_name: '', // 省
          city_name: '', // 市
          region_name: '', // 区
          address: '', // 详细地址
        },

        address: [
          { name: '联系人：', place: '请输入联系人', value: 'addressee' },
          { name: '联系人电话：', place: '请输入联系人电话', value: 'mobile' },
          { name: '详细地址：', place: '请输入详细地址', value: 'address' },
        ],
        baddress: '',
        addressForm: {
          mobile: '', // 联系人电话
          addressee: '', // 联系人
          address: '', // 详细地址
        },
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const params = {
              pid: 0,
            }
            params.pid = node.value
            getArea(params).then((res) => {
              const arr = []
              res.data.forEach((e) => {
                arr.push({
                  value: e.id,
                  label: e.name,
                  leaf: e.level >= 3,
                })
              })
              resolve(arr)
            })
          },
        },
      }
    },
    methods: {
      // 选择地址
      chooseAddress(item) {
        this.addressName = item.address
        this.payForm.ord_cons = item.addressee
        this.payForm.ord_tel = item.mobile
        for (let key in item) {
          for (let keyChild in this.payForm) {
            if (key == keyChild) {
              this.payForm[keyChild] = item[key]
            }
          }
        }
        this.$emit('send', this.payForm)
      },

      // 地址，下拉框
      cascaderChange(e) {
        const province_code = e[0]
        const city_code = e[1]
        const area_code = e[2]
        this.addressForm.province_id = province_code
        this.addressForm.city_id = city_code
        this.addressForm.region_id = area_code
      },
      // 添加地址
      addressSubmit() {
        this.addressForm.group_id = this.oGroupId
        groupAddressAdd(this.addressForm).then(() => {
          this.baddress = ''
          this.addressForm = {
            mobile: '',
            addressee: '',
            address: '',
          }
          this.dialogAddAddress = false
          this.$emit('sendGet')
        })
      },
    },
  }
</script>

<style scoped>
  .flex_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
